// body {
//   background-image: linear-gradient(
//     to right top,
//     #ffcc00 50%,
//     #eee 50%;

//   ) !important;
//   background-size: 100% calc(100% - 100vh + 5px);
//   background-repeat: no-repeat;
//   &::after {
//     content: '';
//     position: fixed;
//     top: 5px;
//     left: 0;
//     bottom: 0;
//     right: 0;
//     background: #fff;
//     z-index: -1;
//   }
// }
body {
  margin-top: 5px;
  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%;);
  background-size: 100% calc(100% - 100vh + 5px);
  background-repeat: no-repeat;
  &::after {
    content: '';
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
  }
}

#app {
  position: relative;
  bottom: 0;
  height: 100%;
  overflow: scroll;
  scroll-behavior: smooth;
  z-index: 99;

  // background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%;);
  // background-size: 100% calc(100% - 100vh + 5px);
  // background-repeat: no-repeat;
  // &::after {
  //   content: '';
  //   position: fixed;
  //   top: 5px;
  //   left: 0;
  //   bottom: 0;
  //   right: 0;
  //   background: #fff;
  //   z-index: -1;
  // }
}

#main {
  .section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding-top: 5px;
    scroll-behavior: smooth;

    &:nth-child(odd) {
      background-color: coral;
    }
    &:nth-child(even) {
      background-color: lawngreen;
    }

    p {
      color: azure;
      font-size: 30px;
      font-weight: bolder;
      text-align: center;
    }
  }
}

// 顶部 进度条 显示
#progressbar {
  position: fixed;
  width: 100%;
  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%;);
  background-size: 100% calc(100% - 100vh + 5px);
  background-repeat: no-repeat;
  z-index: 1;
  &::after {
    content: '';
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
  }
}
